<template>
	<view>
		<gameBasics backgroundColor="rgba(254, 209, 148, .4)" />

		<view class="content_">
			<view class="top">
				<image :src="activeTeam.pic" mode=""></image>
				<view class="title">
					{{activeTeam.title||''}}
				</view>
				<view class="type">
					解密中<view v-for="(item) in num" class="dot"></view>
				</view>
				<view class="time">
					<!-- （倒计时30秒） -->
				</view>
			</view>

			<view class="bottom">
				<view class="topic">
					<image :src="decry.pic" mode="aspectFill"></image>
				</view>
				<view class="right">
					<view class="team_item" v-for="(item ,index) in teamList" :key="idnex" v-if="item.id!=activeTeam.id">
						<image :src="item.pic" mode="aspectFill"></image>
						<view class="title">
							{{item.title}}
						</view>
						<view class="type">
							准备中<view class="dot" v-for="(item) in num"></view>
						</view>
					</view>

					<view class="input" v-if="activeTeam.id==userPeople.teamId&&userPeople.cap_zt==2">
						<input type="text" v-model="answer">
						<view class="game_btn" @click="submit">
							<view class="">

							</view>
							提交
						</view>
					</view>
					<view v-else-if="activeTeam.id==userPeople.teamId" class="input" >
						队长正在解密。。。
					</view>
					
					<view v-else class="input" style="opacity: 0;">
						<input type="text" disabled="">
						<view class="game_btn">
							<view class="">
					
							</view>
							暂未
						</view>
					</view>
				</view>
			</view>

		</view>
<gameLoading/>


<u-popup :show="remindShow" mode="center" :safeAreaInsetBottom="false" closeable round="12rpx"  @close="remindShow=false">
			<view style="padding: 0 50upx;width: calc(624vmin / 7.5);">
				<view class=""
					style="font-size: calc(36vmin / 7.5);color: #333333;text-align: center;font-weight: 700;margin: calc(110vmin / 7.5) auto;">
					解密失败,获得额外线索!
				</view>
				<view class="" style="display: flex;justify-content: space-between;margin-bottom: calc(30vmin / 7.5);">
					<view class="anew_btn" @click="go">
						去查看
					</view>
					<view class="anew_btn" @click="remindShow=false">
						不用了
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>	
	export default {
		data() {
			return {
				decry:{},
				gameData:{},
				userPeople:{},
				answer:'',
				teamList:[],
				activeTeam:{},
				num:0,
				acceptStatus:true,
				remindShow:false
			}
		},
		onUnload() {
			this.acceptStatus=false
			// // uni.$off('onMessage') 
		},
		onShow() {
			this.$nextTick(()=>{
				this.$store.commit('switchGame', {
					code: false
				})
			})
		},

		mounted() {
			setInterval(()=>{
				if(this.num==3) {
					this.num=0
				}else{
					this.num++
				}
			},1000)
			let page = getCurrentPages();
			let currentRoute = page[page.length - 1].route
			uni.$on('onMessage',(res)=>{
				if(!this.acceptStatus) return;
				this.gameData = res.data.game
				this.decry=res.data.decry
				this.teamList=res.data.team
				this.activeTeam=this.teamList.filter(item=>item.id==res.data.team_id)[0]
				this.userPeople=res.data.userPeople
			})
		let game_id = uni.getStorageSync("gameId")
		let userData = uni.getStorageSync("userData")	
						if(!this.$ws.socketTask) return this.$ws.init();
		this.$ws.socketTask.send({
			data: JSON.stringify({
			game_id,
			user_id: userData.id
		}),
			async success() {
				console.log("消息发送成功")
			}
		});
		},
		methods: {
			submit(){
				let data={
					game_id:this.gameData.id,
					team_id:this.userPeople.teamId,
					content:this.answer
				}
				this.$myRuquestWs('home/game/game_decry',data).then(res=>{
					if(res.msg){
						uni.showToast({
						title: res.msg,
						icon:'none'
					});
					}
					
					this.answer=''
					if(res.data==201){
						this.remindShow=true
					}
				})
			},
			go(){
				this.remindShow=false
				uni.navigateTo({
					url:'/pages/gameTemplate/clue?game_id=' + this.gameData.id + '&team_id=' + this.userPeople.teamId +
						'&activ_id=' + this.gameData.activ_id+'&code=true'
				})
			}
		}
	}
</script>

<style lang="scss">
	.content_ {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 70vw;
		height: calc(100vh - calc(120vmin / 7.5));
		margin: 0 auto;
		padding: calc(60vmin / 7.5) 0;

		.top {
			display: flex;
			align-items: center;
			color: #999;
			font-size: calc(32vmin / 7.5);
			image {
				width: calc(120vmin / 7.5);
				height: calc(120vmin / 7.5);
				border-radius: calc(12vmin / 7.5);
			}

			.title {
				margin: 0 calc(20vmin / 7.5);
				font-size: calc(42vmin / 7.5);
				font-weight: 700;
				color: #333;

			}
		}

		.bottom {
			display: flex;
			flex: 1;
			align-items: flex-end;

			.topic {
				width: calc(340vmin / 7.5);
				height: calc(340vmin / 7.5);
				background-color: #fff;
				margin-right: calc(60vmin / 7.5);

				image {
					width: 100%;
					height: 100%;
					border-radius: calc(12vmin / 7.5);
				}
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.team_item {
					display: flex;
					align-items: center;
					font-size: calc(28vmin / 7.5);
					color: #999;
					margin: calc(10vmin / 7.5) 0;

					image {
						width: calc(90vmin / 7.5);
						height: calc(90vmin / 7.5);
					}

					.title {
						font-size: calc(32vmin / 7.5);
						font-weight: 700;
						color: #333;
						margin: 0 calc(20vmin / 7.5);
					}
				}
			
			  .input{
					display: flex;
					white-space: nowrap;
					align-items: center;
					input{
						width: calc(300vmin / 7.5);
						height: calc(30vmin / 7.5);
						padding:calc(10vmin / 7.5) calc(20vmin / 7.5);
						background: #FAFAFA;
						border:  calc(4vmin / 7.5) solid #ccc;
						border-radius: calc(12vmin / 7.5);
						margin-right: calc(20vmin / 7.5);
					}
				}
			
			}
		}
	}
  .type{
		display: flex;
		align-items: baseline;
		min-width: calc(200vmin / 7.5);
	}
	.dot{
		width: calc(10vmin / 7.5);
		height: calc(10vmin / 7.5);
		border-radius: 50%;
		background: #999;
		margin:calc(10vmin / 7.5) ;
	}
</style>
